<template>
    <el-dialog title="订阅接口" :visible.sync="dialogVisible" :before-close="handleClose" width="1440px">
        <div class="doc-subscribe-dialog">
            <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="110px">
                <el-row>
                    <el-col :span="24">
                        <el-form-item>
                            <el-table :data="list" border>
                                <el-table-column label="序号" type="index"></el-table-column>
                                <el-table-column label="服务中文名称" prop="apiName" show-overflow-tooltip width="150"></el-table-column>
                                <el-table-column label="服务英文名称" prop="apiNameEn" show-overflow-tooltip width="150">
                                    <template slot-scope="scope">
                                        {{ scope.row.apiNameEn || '-'}}
                                    </template>
                                </el-table-column>
                                <el-table-column label="接口所属组" prop="groupName" show-overflow-tooltip width="150">
                                    <template slot-scope="scope">
                                        {{ scope.row.groupName || '-'}}
                                    </template>
                                </el-table-column>
                                <el-table-column label="服务地址" prop="requestPath" show-overflow-tooltip width="200"></el-table-column>
                                <el-table-column label="版本号" prop="apiVersion" show-overflow-tooltip align="center">
                                    <template slot-scope="scope">
                                        {{ scope.row.apiVersionOut || scope.row.apiVersion || '-'}}
                                    </template>
                                </el-table-column>
                                <el-table-column label="创建人" prop="createBy" show-overflow-tooltip width="100"></el-table-column>
                                <el-table-column label="创建时间" prop="createTime" show-overflow-tooltip width="150"></el-table-column>
                            </el-table>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="申请订阅原因" prop="subscribeReason">
                            <el-input type="textarea" placeholder="请输入申请订阅原因" v-model="ruleForm.subscribeReason" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>

        <span slot="footer" class="doc-subscribe-dialog__footer">
            <el-button type="primary" :disabled="loading" @click="submitForm('ruleForm')">确认</el-button>
            <el-button type="info" @click="onClose">取消</el-button>
        </span>
    </el-dialog>
</template>

<script>
import { subscribeInterface } from "@/api/dataService/application"

export default {
    name: 'approveTableDialog',
    model: {
        prop: "visible",
        event: "change"
    },
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        form: {
            type: Object,
            default: () => {
                return {}
            }
        },
        list: {
            type: Array,
            default: () => {
                return []
            }
        },
    },
    data() {
        return {
            loading: false,
            ruleForm: {
                subscribeReason: ''
            },
            rules: {
                subscribeReason: [{ required: true, message: "申请订阅原因不能为空", trigger: "change" }],
            },
        };
    },
    computed: {
        dialogVisible: {
            get() {
                return this.visible;
            },
            set(newValue) {
                this.$emit("change", newValue);
            }
        },
        mergerRuleForm() {
            return Object.assign({}, this.ruleForm, this.form)
        }
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    this.handleSubscribeInterface()
                }
            });
        },
        resetForm() {
            this.$refs.ruleForm.resetFields();
        },
        onClose() {
            this.resetForm()
            this.dialogVisible = false
        },
        handleClose(done) {
            this.resetForm()
            done()
        },
        handleSubscribeInterface(status) {
            if (this.loading) return false
            this.loading = true

            let apiVersionIds = this.list.filter(item => item.currentUserSubscribed != 1).map(item => item.id)
            if (!apiVersionIds.length) {
                this.msgError("所选接口已全部订阅成功，无须重复订阅");
                this.loading = false
                return
            }

            let params = {
                apiVersionIds: apiVersionIds.join(','),
                subscribeReason: this.ruleForm.subscribeReason
            }

            subscribeInterface(params).then(res => {
                if (res.code == 200) {
                    this.msgSuccess("已提交订阅，请等待审批");
                    this.onClose()
                    this.$emit("success", true);
                } else {
                    this.msgError("申请订阅失败");
                }
                this.loading = false
            }).catch(err => {
                this.loading = false
                
            })
        },
    }
}
</script>

<style lang="scss" scoped>
.doc-subscribe-dialog {
    &__footer {
        display: flex;
        justify-content: center;
    }
}
</style>